import { Tooltip, Tag } from 'antd';
import type { Settings as ProSettings } from '@ant-design/pro-layout';
import { QuestionCircleOutlined } from '@ant-design/icons';
import React from 'react';
import type { ConnectProps } from 'umi';
import { connect, SelectLang } from 'umi';
import type { ConnectState } from '@/models/connect';
import Avatar from './AvatarDropdown';
import HeaderSearch from '../HeaderSearch';
import styles from './index.less';
import NoticeIconView from './NoticeIconView';
export type GlobalHeaderRightProps = {
    theme?: ProSettings['navTheme'] | 'realDark';
} & Partial<ConnectProps> &
    Partial<ProSettings>;
const ENVTagColor = {
    dev: 'orange',
    test: 'green',
    pre: '#87d068',
};

const GlobalHeaderRight: React.SFC<GlobalHeaderRightProps> = (props) => {
    const { theme, layout } = props;
    let className = styles.right;

    if (theme === 'dark' && layout === 'top') {
        className = `${styles.right}  ${styles.dark}`;
    }

    return (
        <div className={className}>
            <HeaderSearch
                className={`${styles.action} ${styles.search}`}
                placeholder="站内搜索"
                defaultValue="Hanxiaozhang Blog"
                options={[
                    {
                        label: <a href="https://blog.csdn.net/huantai3334">Hanxiaozhang Blog</a>,
                        value: 'Hanxiaozhang Blog',
                    },
                    {
                        label: <a href="https://gitee.com/hanxiaozhang2018">Hanxiaozhang Gitee</a>,
                        value: 'Hanxiaozhang Gitee',
                    },
                ]} // onSearch={value => {
            //   //console.log('input', value);
            // }}
            />
            <Tooltip title="使用文档">
                <a
                    style={{
                        color: 'inherit',
                    }}
                    target="_blank"
                    href=""
                    rel="noopener noreferrer"
                    className={styles.action}
                >
                    <QuestionCircleOutlined />
                </a>
            </Tooltip>
            <NoticeIconView />
            <Avatar menu />
            {REACT_APP_ENV && (
                <span>
                    <Tag color={ENVTagColor[REACT_APP_ENV]}>{REACT_APP_ENV}</Tag>
                </span>
            )}
            <SelectLang className={styles.action} />
        </div>
    );
};

export default connect(({ settings }: ConnectState) => ({
    theme: settings.navTheme,
    layout: settings.layout,
}))(GlobalHeaderRight);
